<!-- /userInfo/editPasswd -->
<template>
    <div class="mainCenter">
        <div class="title">密码修改(未完成)</div>
        <div class="mainCenterBox">
            <el-form label-width="120" :model="pwd" :rules="rules" ref="formRef">
                <el-form-item label="原密码" prop="oldPasswd">
                    <el-input type="password" v-model="pwd.oldPasswd" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPasswd">
                    <el-input type="password" v-model="pwd.newPasswd" show-password></el-input>
                </el-form-item>
                <el-form-item label="重复新密码" prop="rePasswd">
                    <el-input type="password" v-model="pwd.rePasswd" show-password></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="save(formRef)">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { User, changePasswdType } from '@/types/user';
import { tip } from '@/utils/alert';
import type { FormInstance, FormRules } from 'element-plus'
import {reactive, ref} from 'vue'
import { useLoginStore } from '@/stores/loginStore';
import { reqEditPasswd } from '@/api/common';
import { CLOSING } from 'ws';
import router from '@/router';
const {mangerInfo}=useLoginStore()
const {mangerLoginOut}=useLoginStore()
const formRef=ref<FormInstance>()
const pwd=ref<changePasswdType>({
    oldPasswd:'',
    newPasswd:'',
    rePasswd:''
})
const checkOldPasswd=(rule:any,value:any,callback:any)=>{
    if(value==""){
        callback(new Error('请输入密码'))
    }else{
        callback()
    }
}
const checkNewPasswd=(rule:any,value:any,callback:any)=>{
    if(value==""){
        callback(new Error('请输入新密码'))
    }else{
        callback()
    }
}

const checkRePasswd=(rule:any,value:any,callback:any)=>{
    if(value==""){
        callback(new Error('请确认新密码'))
    }else if(value!=pwd.value.newPasswd){
        callback(new Error('两次新密码不一致'))
    }
    else{
        callback()
    }
}


const rules = reactive<FormRules>({
  oldPasswd: [{ validator: checkOldPasswd, trigger: 'blur',required:true }],
  newPasswd: [{ validator: checkNewPasswd, trigger: 'blur' ,required:true}],
  rePasswd: [{ validator: checkRePasswd, trigger: 'blur' ,required:true}],
})

const save = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        let user:User|null={...mangerInfo}
       if(user){
        user.password=pwd.value.oldPasswd
        user.repassword=pwd.value.newPasswd
        reqEditPasswd(user).then(res=>{
            if(res.data.code=="200"){
                tip("修改成功",'success')
                mangerLoginOut()
            }else{
                tip("修改失败","error")
            }
       })
    }
       

       
    } else {
        tip('有未填的必需项','warning')
      return false
    }
  })
}
</script>

<style scoped lang="scss">
.el-form{
    width: 400px;
    .el-button{
        width: 100%;
    }
}
</style>